<template>
  <view class="announcement-popup" v-if="showPopup">
    <view class="popup-content">
      <view class="popup-title">公告</view>
      <view class="popup-title-h2">我们仅提供场地及相应设备设施,使用人须遵守治安管理条例,违者由使用人自行承担相应责任及后果:</view>
      <view class="popup-point" v-for="(point, index) in announcementPoints" :key="index">{{ point }}</view>
      <view class="popup-button" @click="confirmReading">好的，我知道了</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    showPopup: {
      type: Boolean,
      default: false
    },
    announcementPoints: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    confirmReading() {
      this.$emit('confirm'); // 触发一个自定义事件，通知父组件用户已确认阅读
    }
  }
}
</script>

<style scoped lang="scss">
.announcement-popup {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  width: 100%;
  height: 100%;
  flex-direction: column;
   font-size: 26rpx;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景用于遮罩 */
}
.popup-title {
  font-weight: bold;
  font-size: 18px;
  align-content: center;
  /* background-color: #dfe6e8; */
  text-align: center;
  margin-bottom: 20px; /* 标题与内容点之间的间距 */
}
.popup-title-h2 {
  font-weight: bold;
  padding:0 0 20rpx 0;
}
.popup-content {
  background-color: #fff; /* 白色背景 */
  border-radius: 5px; /* 圆角边框 */
  width: 75%; /* 内容部分宽度稍小于弹窗宽度 */
  max-width: 600px; /* 限制最大宽度，以适应不同屏幕 */
  padding: 10px;
}
.popup-point {
  margin-bottom: 5px; /* 每个内容点之间的间距 */
}
.popup-button {
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
  background-color: $uni-theme-color;
  color: #fff;
  border-radius: 40rpx;
  margin-top: 20px; /* 按钮与内容点之间的间距 */
  margin-bottom: 15px; /* 按钮与内容点之间的间距 */
}
</style>